<template>
  <div class="wrap">
    <div class="wrap-top">
      <div class="wrap-top-ct">
        <pie-simple
          name="countExpertArea"
          :data="countExpertArea"
          :extend="{ title: '专家比例', legend: true, radius: ['40%', '60%'] }"
        />
        <span v-if="count > 0">{{ count }}人<br /><em>总人数</em></span>
      </div>
      <div class="wrap-top-ct">
        <bar-gradient
          name="countExpertHelpLineData"
          :data="countExpertHelpLineData"
          :extend="{ title: '专家咨询统计', label: true }"
        />
      </div>
      <div class="wrap-top-ct">
        <line-stack
          name="countExpertServiceLineData"
          :data="countExpertServiceLineData"
          :extend="{ title: '上门预约(次)', label: false }"
        />
      </div>
    </div>
    <div class="wrap-bt">
      <div class="wrap-bt-lt" ref="myElement">
        <h1>知识库热搜</h1>
        <div class="wordCloudTagBall" v-if="contentEle?.length">
          <span
            class="wordCloudTag"
            v-for="(item, index) of wordData"
            :key="index"
            :style="{
              // background: colorList[index % colorList.length],
              color: colorList[index % colorList.length],
              'box-shadow': `0 0 20px 7px ${
                colorList[index % colorList.length]
              } inset`,
              ...contentEle[index].style,
            }"
            :title="item"
            >{{ item }}</span
          >
        </div>
      </div>
      <div class="wrap-bt-rt">
        <pie-simple
          name="countHotTagsByType"
          :data="countHotTagsByType"
          :extend="{
            title: '知识库分类访问量',
            legend: false,
            radius: ['40%', '60%'],
          }"
        />
        <span v-if="counts > 0">{{ counts }}人<br /><em>总访问量</em></span>
      </div>
    </div>
  </div>
</template>
<script>
import pieSimple from '@c/echarts/pie-simple'
import barGradient from '@c/echarts/bar-gradient'
import lineStack from '@c/echarts/line-stack'
export default {
  components: {
    pieSimple,
    barGradient,
    lineStack,
  },
  data() {
    return {
      countExpertArea: [],
      count: 0,
      countExpertHelpLineData: {
        categories: [],
        series: [],
      },
      countExpertServiceLineData: {
        categories: [],
        series: [],
      },
      wordData: [
        '高新企业',
        '100.9万',
        '怀柔区国家',
        '一核四区',
        '实验室挂牌',
        '高新企业',
        '企业入驻',
        '一核四区',
      ],
      colorList: [
        '#FF7866',
        '#5DEC6B',
        '#ff646f',
        '#00F6FF',
        '#2eccff',
        '#E2CE22',
        '#0090FF',
        '#1BDA87',
      ],
      contentEle: [], // 词云的位置信息
      direction: '-1', // 方向 (-1 从左到右 1 从右到左 2从下到上 -2从上到下)
      speed: 1000, // 速度
      width: 0, // 词云宽
      height: 200,
      countHotTagsByType: [],
      counts: 0,
    }
  },
  created() {
    this.countExpertAreaList()
    this.countExpertHelpLineDataList()
    this.countExpertServiceLineDataList()
    this.hotTagsList()
    this.countHotTagsByTypeList()
  },
  mounted() {
    const width = this.$refs.myElement.offsetWidth // 获取元素宽度
    this.width = width
    this.init()
  },
  methods: {
    countExpertAreaList() {
      this.$axios.get('/count/bigscreent3/countExpertArea').then((data) => {
        this.countExpertArea = []
        this.count = 0
        if (data.code == 200) {
          this.count = data.data.count
          this.countExpertArea = data.data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countExpertHelpLineDataList() {
      this.$axios
        .get('/count/bigscreent3/countExpertHelpLineData')
        .then((data) => {
          this.countExpertHelpLineData = { categories: [], series: [] }
          if (data.code == 200) {
            const categories = [],
              series = []
            data.data.forEach((element) => {
              categories.push(element.name)
              series.push(element.value)
            })
            this.countExpertHelpLineData = {
              categories: categories,
              series: [
                {
                  name: '专家咨询统计',
                  data: series,
                },
              ],
            }
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    countExpertServiceLineDataList() {
      this.$axios
        .get('/count/bigscreent3/countExpertServiceLineData')
        .then((data) => {
          this.countExpertServiceLineData = { categories: [], series: [] }
          if (data.code == 200) {
            const categories = [],
              series = []
            data.data.forEach((element) => {
              categories.push(element.name)
              series.push(element.value)
            })
            this.countExpertServiceLineData = {
              categories: categories,
              series: [
                {
                  name: '上门预约(次)',
                  data: series,
                },
              ],
            }
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    hotTagsList() {
      this.$axios.get('/count/bigscreent3/hotTags').then((data) => {
        this.wordData = []
        if (data.code == 200) {
          this.wordData = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    init() {
      const RADIUSX = (this.width - 50) / 2
      const RADIUSY = (this.height - 50) / 2
      this.contentEle = []
      for (let i = 0; i < this.wordData.length; i += 1) {
        const k = -1 + (2 * (i + 1) - 1) / this.wordData.length
        const a = Math.acos(k)
        const b = a * Math.sqrt(this.wordData.length * Math.PI)
        const x = RADIUSX * Math.sin(a) * Math.cos(b)
        const y = RADIUSY * Math.sin(a) * Math.sin(b)
        const z = RADIUSX * Math.cos(a)
        this.contentEle.push({
          x,
          y,
          z,
          style: {},
        })
      }
      this.animate()
    },
    animate() {
      this.rotateX()
      this.rotateY()
      this.move()
      window.requestAnimationFrame(this.animate)
    },
    rotateX() {
      const angleX = ['-1', '1'].includes(this.direction)
        ? Math.PI / Infinity
        : Math.PI / ((Number(this.direction) / 2) * Number(this.speed))
      const cos = Math.cos(angleX)
      const sin = Math.sin(angleX)
      this.contentEle = this.contentEle.map((t) => {
        const y1 = t.y * cos - t.z * sin
        const z1 = t.z * cos + t.y * sin
        return {
          ...t,
          y: y1,
          z: z1,
        }
      })
    },
    rotateY() {
      const angleY = ['-2', '2'].includes(this.direction)
        ? Math.PI / Infinity
        : Math.PI / (Number(this.direction) * Number(this.speed))
      const cos = Math.cos(angleY)
      const sin = Math.sin(angleY)
      this.contentEle = this.contentEle.map((t) => {
        const x1 = t.x * cos - t.z * sin
        const z1 = t.z * cos + t.x * sin
        return {
          ...t,
          x: x1,
          z: z1,
        }
      })
    },
    move() {
      const CX = this.width / 2
      const CY = this.height / 2
      this.contentEle = this.contentEle.map((singleEle) => {
        const { x, y, z } = singleEle
        const fallLength = 500
        const RADIUS = (this.width - 50) / 2
        // const scale = fallLength / (fallLength - z)
        const scale = 1
        const alpha = (z + RADIUS) / (2 * RADIUS)
        const left = `${x + CX - 15}px`
        const top = `${y + CY - 15}px`
        const transform = `translate(${left}, ${top}) scale(${scale})`
        const style = {
          ...singleEle.style,
          opacity: alpha + 0.5,
          zIndex: parseInt(String(scale * 100), 10),
          transform,
        }
        return {
          x,
          y,
          z,
          style,
        }
      })
    },
    countHotTagsByTypeList() {
      this.$axios.get('/count/bigscreent3/countHotTagsByType').then((data) => {
        this.countHotTagsByType = []
        this.counts = 0
        if (data.code == 200) {
          this.counts = data.data.count
          data.data.data.forEach((element) => {
            this.countHotTagsByType.push({
              name: element.name,
              value: element.percent,
            })
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.wrap {
  &-top {
    display: flex;
    &-ct {
      width: 33%;
      position: relative;
      span {
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        text-align: center;
        em {
          font-size: 12px;
          color: #b1b1b1;
        }
      }
    }
  }
  &-bt {
    display: flex;
    &-lt {
      flex: 1;
      h1 {
        font-size: 18px;
        color: #333;
        font-weight: bold;
        padding: 20px 0 0 20px;
      }
      .wordCloudTagBall {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 300px;
      }
      .wordCloudTag {
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 96px;
        width: 150px;
        height: 50px;
      }
    }
    &-rt {
      width: (100%);
      padding-top: 20px;
      position: relative;
      span {
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);
        text-align: center;
        em {
          font-size: 12px;
          color: #b1b1b1;
        }
      }
    }
  }
}
</style>
